<%@ page contentType="text/html;charset=UTF-8" %>
<%--解析表达式--%>
<%@ page isELIgnored="false" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <jsp:include page="distforeEnd.jsp"/>
    <style>
        .ddds {
            background-color: #d9d3d4;
        }
    </style>
</head>
<body style="background-color: #FFFFff;">

<jsp:include page="headerforeEnd.jsp"/>
<!--上面的进度-->
<div id="stepBar" class="ui-stepBar-wrap">
    <div class="ui-stepBar">
        <div class="ui-stepProcess"></div>
    </div>
    <div class="ui-stepInfo-wrap">
        <table class="ui-stepLayout" border="0" cellpadding="0" cellspacing="0">
            <tr>
                <td class="ui-stepInfo">
                    <a class="ui-stepSequence">1</a>
                    <p class="ui-stepName">输入邮箱/手机</p>
                </td>
                <td class="ui-stepInfo">
                    <a class="ui-stepSequence">2</a>
                    <p class="ui-stepName">修改密码</p>
                </td>
                <td class="ui-stepInfo">
                    <a class="ui-stepSequence">3</a>
                    <p class="ui-stepName">修改结果</p>
                </td>
            </tr>
        </table>
    </div>
</div>


<%--1--%>
<div class="myTab" id="repall_1">
    <div class="rep_out">
        <div class="rep_bgimg">
            <div class="rep_bgin">
                <div class="rep_text">输入邮箱或手机号找回密码</div>
                <div style="text-align: left;padding-left: 60px">
                    <input type="text" id="email1" class="rep_input"
                           placeholder="手机号/邮箱">
                    <button class="rep_button" id="emailGo" onclick="getCode()">发送验证码</button>
                    <input type="text" id="email2" class="rep_input5"
                           placeholder="输入验证码">
                </div>

                <%--错误信息--%>
                <div class="rep_error" id="emailMsg1Box" style="display: none">
                    <span class="fa fa-exclamation-circle">&nbsp;</span>
                    <span id="emailMsg1"></span>
                </div>
                <button class="rep_next" id="toEmail" onclick="commit()">提 交</button>
            </div>
        </div>
    </div>
</div>


<%--3--%>
<div class="myTab" id="repall_3">
    <div class="rep_out">
        <div class="rep_bgimg">
            <div class="rep_bgin">
                <div class="rep_text">新密码</div>
                <div style="text-align: left;margin-left: 40px">
                    <span style="font-size: 16px">输入密码：</span><input id="password1" type="password" class="rep_input2"
                                                                     placeholder="">
                </div>
                <div style="text-align: left;margin-left: 40px;margin-top: 10px">
                    <span style="font-size: 16px">确认密码：</span><input id="password2" type="password" class="rep_input2"
                                                                     placeholder="">
                </div>

                <%--错误信息--%>
                <div class="rep_error2" id="emailMsg3Box" style="display: none">
                    <span class="fa fa-exclamation-circle">&nbsp;</span>
                    <span id="emailMsg3">两次输入密码不一样</span></div>
                <button class="rep_next2" onclick="updatePwd(this)">确 定</button>
            </div>
        </div>
    </div>
</div>

<%--4--%>

<div class="myTab" id="repall_4">
    <div class="rep_out">
        <div class="rep_bgimg">
            <div class="rep_bgin">
                <h2 style="color: #fc6866">修改成功</h2>
                <a href="${pageContext.request.contextPath}/" class="rep_b4">返回首页</a>
                <div style="margin-top: 40px;font-size: 15px">
                    <span id="rep_time" style="font-size: 25px;color: #FFA500">5</span>秒后自动跳转
                </div>
            </div>
        </div>
    </div>
</div>

<!--进度-->
<script type="text/javascript"
        src="${pageContext.request.contextPath}/dist/foreEnd3/lib/jquery/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/dist/foreEnd3/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/dist/foreEnd3/js/stepBar.js"></script>

<script type="text/javascript">
    $(function () {
        var state2 = 1;
        if ('${param.type}' !== '') {
            state2 = "${param.type}";
        }
        stepBar.init("stepBar", {
            step: state2,
            change: false,
            animation: false
        });
        $('.myTab').hide();
        $('#repall_' + state2).show();

        if (state2 === '4') {
            var i = 4;
            setInterval(function () {
                if (i === 0) {
                    location.href = "${pageContext.request.contextPath}/";
                }
                document.getElementById("rep_time").innerHTML = i--;
            }, 1200);
        }
    });

    function updatePwd(btn) {
        var p1 = $('#password1').val();
        var p2 = $('#password2').val();
        var key = $("#email2").val();
        var email = $("#email1").val();
        if (p1 == "" || p2 == "") {
            $("#emailMsg3Box").show();
            $("#emailMsg3").text("密码不能为空");
        } else if (p1.length < 6 || p1.length > 18) {
            $("#emailMsg3Box").show();
            $("#emailMsg3").text("长度必须在6到18字符之间");
        } else if (p1 != p2) {
            $("#emailMsg3Box").show();
            $("#emailMsg3").text("密码不一致");
        } else if (isPhone) {
            $(btn).addClass("ddds");
            $(btn).attr("disabled", true);
            $.ajax({
                url: '${pageContext.request.contextPath}/XzRegister/findBackPhone3.do',
                data: {key: key, phone: email, password: p2},
                success: function (data) {
                    if (data.msg === "ok") {
                        var state2 = 4;
                        stepBar.init("stepBar", {
                            step: state2,
                            change: false,
                            animation: false
                        });
                        $('.myTab').hide();
                        $('#repall_' + state2).show();
                        var i = 4;
                        setInterval(function () {
                            if (i == 0) {
                                location.href = "${pageContext.request.contextPath}/";
                            }
                            document.getElementById("rep_time").innerHTML = i--;
                        }, 1200);
                    } else {
                        alert("修改失败");
                    }
                }
            });
        } else {
            $(btn).addClass("ddds");
            $(btn).attr("disabled", true);
            $.ajax({
                url: '${pageContext.request.contextPath}/XzRegister/findBack3.do',
                data: {key: key, email: email, password: p2},
                success: function (data) {
                    if (data.msg === "ok") {
                        var state2 = 4;
                        stepBar.init("stepBar", {
                            step: state2,
                            change: false,
                            animation: false
                        });
                        $('.myTab').hide();
                        $('#repall_' + state2).show();
                        var i = 4;
                        setInterval(function () {
                            if (i === 0) {
                                location.href = "${pageContext.request.contextPath}/";
                            }
                            document.getElementById("rep_time").innerHTML = i--;
                        }, 1200);
                    } else {
                        alert("修改失败");
                    }
                }
            });
        }
    }

    function commit() {
        var url = '';
        var data = {};
        var time = 60;
        var string = $('#email1').val();
        var key = $("#email2").val();
        var button = $('#toEmail');
        var type = getType(string);
        if (type === '空') {
            showWarning("邮箱/手机号不能为空");
            return 0;
        } else if (type === '错误') {
            showWarning("邮箱/手机号格式错误");
            return 0;
        } else if (type === '邮箱') {
            url = '/XzRegister/selByEmail.do';
            data = {key: key, email: string};
        } else if (type === '手机') {
            url = '/XzRegister/selByPhone.do';
            data = {key: key, phone: string};
        }
        button.attr("disabled", true);
        button.addClass("ddds");
        var pet = setInterval(function () {
            time--;
            button.html(time + "秒后重试");
            if (time === 0) {
                clearInterval(pet);
                button.attr("disabled", false);
                button.removeClass("ddds");
                button.html("提交");
                hideWarning();
            }
        }, 1000);
        $.ajax({
            url: '${pageContext.request.contextPath}'.concat(url),
            data: data,
            success: function (data) {
                if (data.msg === "ok") {
                    hideWarning();
                    checkCode(type, key, string);
                } else {
                    showWarning(type + "不存在");
                }
            }, error: function () {
                showWarning('后台查询错误');
            }
        });
    }

    function showWarning(string) {
        $('#emailMsg1Box').show();
        $('#emailMsg1').text(string);
    }

    function hideWarning() {
        $('#emailMsg1Box').hide();
        $('#emailMsg1').text('');
    }

    function getType(string) {
        var regEmail = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
        var regPhone = /^1[0-9]{10}$/;
        if (string === '' || string === undefined) {
            return '空';
        } else if (regEmail.test(string)) {
            return '邮箱';
        } else if (regPhone.test(string)) {
            return '手机';
        } else {
            return '错误';
        }
    }

    function getCode() {
        var url = '';
        var data = {};
        var time = 60;
        var string = $('#email1').val();
        var button = $('#emailGo');
        var type = getType(string);
        if (type === '空') {
            showWarning("邮箱/手机号不能为空");
            return 0;
        } else if (type === '错误') {
            showWarning("邮箱/手机号格式错误");
            return 0;
        } else if (type === '邮箱') {
            url = '/XzRegister/selByEmail.do';
            data = {email: string};
        } else if (type === '手机') {
            url = '/XzRegister/selByPhone.do';
            data = {phone: string};
        }
        button.attr("disabled", true);
        button.addClass("ddds");
        var pet = setInterval(function () {
            time--;
            button.html(time + "秒后重试");
            if (time === 0) {
                clearInterval(pet);
                button.attr("disabled", false);
                button.removeClass("ddds");
                button.html("获取验证码");
                hideWarning();
            }
        }, 1000);
        $.ajax({
            url: '${pageContext.request.contextPath}'.concat(url),
            data: data,
            success: function (data) {
                if (data.msg === "ok") {
                    hideWarning();
                    sendCode(type, string);
                } else {
                    showWarning(type + "不存在");
                }
            }, error: function () {
                showWarning('后台查询错误');
            }
        });
    }

    function sendCode(type, string) {
        var url = '';
        var data = {};
        if (type === '手机') {
            url = '/XzRegister/findBackPhone1.do';
            data = {phone: string};
        } else if (type === '邮箱') {
            url = '/XzRegister/findBack1.do';
            data = {email: string};
        }
        $.ajax({
            url: '${pageContext.request.contextPath}'.concat(url),
            data: data,
            success: function (data) {
                if (data.msg === "ok") {
                    showWarning('验证码已发送到' + type + '，请查收');
                } else {
                }
            }, error: function () {
            }
        });
    }

    function checkCode(type, key, string) {
        var url = '';
        var data = {};
        if (type === '手机') {
            url = '/XzRegister/findBackPhone2.do';
            data = {key: key, phone: string};
        } else if (type === '邮箱') {
            url = '/XzRegister/findBack2.do';
            data = {key: key, email: string};
        }
        $.ajax({
            url: '${pageContext.request.contextPath}'.concat(url),
            data: data,
            success: function (data) {
                if (data.msg === "ok") {
                    var state2 = 3;
                    stepBar.init("stepBar", {
                        step: state2,
                        change: false,
                        animation: false
                    });
                    $('.myTab').hide();
                    $('#repall_' + state2).show();
                } else {
                    showWarning('验证码错误');
                }
            }, error: function () {
            }
        });
    }

</script>
</body>
</html>
